<template>
  <div>
    <div class="user-container">
      <!-- 用户基本信息 -->
      <div class="user-card">
        <!-- 用户的头像、姓名 -->
        <van-cell class="top">
          <!-- 使用插槽来自定义 -->
          <template #icon>
            <img :src="user.photo" alt="" class="avater">
          </template>
          <template #title>
            <span>{{ user.name }}</span>
          </template>
          <template #label>
            <van-tag>申请认证</van-tag>
          </template>
        </van-cell>
        <!-- 动态、关注、粉丝 -->
        <div class="user-data">
          <div class="user-data-item">
            <span>{{ user.art_count }}</span>
            <span>动态</span>
          </div>
          <div class="user-data-item">
            <span>{{ user.follow_count }}</span>
            <span>关注</span>
          </div>
          <div class="user-data-item">
            <span>{{ user.fans_count }}</span>
            <span>粉丝</span>
          </div>
        </div>
      </div>
      <!-- 操作面板 -->
      <van-cell-group>
        <van-cell icon="edit" title="编辑资料" is-link to="/user_edit" />
        <van-cell icon="chat-o" title="兔子同学" is-link to="/chat" />
        <van-cell icon="warning-o" title="退出登录" is-link @click="leaveFn" />
      </van-cell-group>
    </div>
  </div>
</template>

<script>
import { userAPI } from '@/api'
import { removeToken } from '@/utils/token'
import { Dialog } from 'vant'
import { mapMutations } from 'vuex'
export default {
  data() {
    return {
      user: {}
    }
  },
  methods: {
    ...mapMutations(['SET_USERPHOTO']),
    async getUserList() {
      const { data: res } = await userAPI()
      console.log(res)
      this.user = res.data
      // Vuex同步
      this.SET_USERPHOTO(this.user.photo)
    },
    // 退出登录
    leaveFn() {
      Dialog.confirm({
        title: '提示',
        message: '确认要退出吗'
      })
        .then(() => {
          // on confirm
          // 清空Token
          removeToken()
          // 回退到登录页
          this.$router.replace('/login')
        })
        .catch(() => {
          // on cancel
        })
    }
  },
  created() {
    this.getUserList()
  }

}
</script>

<style lang="less" scoped>
/* 头像 */
.avater {
  width: 60px;
  height: 60px;
  border-radius: 50%;
}

// 顶部面板
.top {
  background-color: pink;
}

.user-data {
  display: flex;
  font-size: 14px;
  padding: 30px 0;
  /* 横轴上平分剩余空间 */
  justify-content: space-around;

  .user-data-item {
    display: flex;
    flex-direction: column;
    align-items: center;
  }
}

// 操作面板
</style>
